<template>
	<view class="search-container">
		<view :class="isSearchStatus?'layout':''" style="background-color: #f7f8fa;">
			<view>
				<searchNavbar :parameter="parameter" :isMap="isMap" @focus="searchFocus" :openSysHeight="true" @toSetting="s=>setting=s"
					bs="search" @confirm="search" @inputs="inputs" :setting="setting" ref="searchNavbar">
					<span slot="title" style="color: #fff;">搜索</span>
				</searchNavbar>
				<view v-if="isSearchStatus == 0" class="searchCon">
					<view class="search-box" v-if="historyList&&historyList.length>0">
						<view class="acea-row row-between row-middle searchTitle">
							<span class="title">历史搜索</span>
							<span class="trash" @click="clearHistory"><u-icon name="trash" color="rgb(0, 0, 0)" :size="17"></u-icon></span>
						</view>
						<view class="acea-row searchList">
							<text class="searchItem" v-for="tag in historyList" :key="tag" @click="toFindSearch(tag)">
								{{tag}}
							</text>
						</view>
					</view>

					<view class="search-box">
						<view class="acea-row row-between row-middle searchTitle">
							<span class="title">搜索发现</span>
							<span class="trash"><u-icon name="reload" color="rgb(0, 0, 0)" :size="17"></u-icon></span>
						</view>
						<view class="acea-row searchList">
							<text class="searchItem" v-for="tag in searchFind" @click="toFindSearch(tag.tag)">
								<block v-if="tag.isHot == 1">
									<image src="../static/images/hot1.png" mode=""></image>
								</block>
								{{tag.tag}}
							</text>

						</view>
					</view>

					<view class="advice">

					</view>
					<!-- 热门任务 -->
					<view class="hot">
						<view class="hotTit">
							<image src="../static/images/hot2.png" mode=""></image>
							<text>
								热门任务
							</text>
							<u-icon name="arrow-right" color="rgba(238,33,45,1)" :size="17"></u-icon>
						</view>
						<view class="hostList">
							<view class="hotItem acea-row row-middle row-between" v-for="(hot,index) in hotRward"
								:key="index">
								<view class="hotItemTit">
									<text class="xh">
										{{index+1}}
									</text>
									<text class="tit">
										{{hot.title}}
									</text>
								</view>
								<text class="hotItemAcc">
									领任务
								</text>

							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="searchList" v-if="isSearchStatus==1">
				<u-list >
					<u-list-item v-for="(item, index) in searchTj" :key="index" >
						<u-cell :title="item.historySearch" @click="toFindSearch(item.historySearch)">
							<u-icon name="search" slot="icon" color="red" size="28"></u-icon>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
			<searchList ref="searchList" v-if="isSearchStatus==2" :setting="setting" />
		</view>
		<u-modal :show="historyModal" :showCancelButton="true" title="提示" content='是否清空历史记录' @confirm="toClear" @cancel="historyModal=false"></u-modal>
	</view>
</template>

<script>
	import searchNavbar from './searchNavbar/searchNavbar.vue'
	import searchList from './searchList.vue'
	import {keywordList} from '@/api/api.js'
	export default {
		components: {
			searchNavbar,
			searchList
		},
		data() {
			return {
				parameter: {
					return: 1,
					placeholder: '一键搜索'
				},
				isSearchStatus: 0, //0 搜索主页，1搜索模糊页 2搜索列表页
				isMap: true,
				keyword: '',
				historyList: [],
				historyModal:false,
				searchFind: [{
					tag: '理发店转让'
				}, {
					tag: '门面出租',
					isHot: 1
				}, {
					tag: '门面转让'
				}],
				searchTj: [],
				hotRward: [{
					title: '出租|汽车西站-五一广场-地下商业街2000 | 120000元/m'
				}, {
					title: '出租|汽车西站-五一广场-地下商业街2000 | 20000元/m'
				}, {
					title: '出租|汽车西站-五一广场-地下商业街2000 | 20000元/m'
				}, {
					title: '创业最小闭环是超市'
				}, {
					title: '小成本创业地摊首选'
				}, {
					title: '个人房东的好铺推荐'
				}],
				setting: {
					categoryType: 1, //默认为商铺
				}
			};
		},
		mounted() {
			this.getHistory();
		},
		onLoad(options) {
			if(options.categoryType){
				this.setting.categoryType = options.categoryType
			}
		},
		watch:{
			setting:{
				handler(){
					console.log("this.settingMa",this.setting)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			toFindSearch(val){
				console.log(this.$refs.searchNavbar.searchKey)
				this.$refs.searchNavbar.searchKey = val;
				this.search(val)
			},
			search(val) {
				// 搜索逻辑
				if (val && val.trim()) {
					let ind = this.historyList.indexOf(val);
					if (ind > -1) {
						this.historyList.splice(ind, 1)
					}
					this.historyList.unshift(val)
				}
				if(this.historyList.length>8){
					this.historyList.splice(8)
				}
				this.isSearchStatus = 2;
				this.$nextTick(() => {
					this.setHistroty()
					this.$refs.searchList.toSearch({
						keyword: val
					});
				})

			},
			inputs(val) {
				if (val) {
					this.isSearchStatus = 1
					uni.$u.debounce(this.toKeywordList(val), 500);
					
				} else {
					this.isSearchStatus = 0
				}
	
			},
			toKeywordList(val){
				keywordList({
					historySearch: val
				}).then(res=>{
					console.log("keywordlIST",res)
					this.searchTj = res.data
				})
			},
			searchFocus(val) {
				console.log("val",val)
				if (val && this.isSearchStatus == 2) {
					console.log("focus", val)
				}
			},
			setHistroty() {
				let that = this;
				uni.setStorage({
					key: 'historySearch',
					data: JSON.stringify(that.historyList),
				})
			},
			clearHistory(){
				this.historyModal = true;
			},
			toClear(){
				let that = this;
				uni.setStorage({
					key: 'historySearch',
					data: "",
				})
				this.historyList = [];
				this.historyModal = false;
			},
			getHistory() {
				let that = this;
				uni.getStorage({
					key: 'historySearch',
					success: function(res) {
						if (res.data) {
							that.historyList = JSON.parse(res.data)
						}
						// console.log(res.data);
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.layout {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.searchList {
			overflow: hidden;
			flex: 1;
		}

	}
	.searchCon{
		padding: 0 30rpx
	}

	.searchList {
		width: 100%;
		background: #fff;
	}

	.search-container {
		// padding: 0 30rpx;
		height: 100vh;
		background-color: #fff;
	}

	.search-box {
		margin-bottom: 20rpx;

		.searchTitle {
			width: 100%;
			padding: 28rpx 0;

			.title {
				font-size: 30rpx;
				color: rgb(0, 0, 0);
				letter-spacing: 2rpx;
			}
		}

		.searchList {
			.searchItem {
				display: flex;
				align-items: center;
				padding: 10rpx 24rpx;
				background-color: rgb(247, 247, 247);
				border-radius: 5rpx;
				margin: 0 10rpx 10px 0;
				font-size: 26rpx;

				image {
					height: 25rpx;
					width: 25rpx;
					margin-right: 3rpx;
				}
			}
		}
	}

	.advice {
		width: 100%;
		height: 61px;
		opacity: 1;
		border-radius: 5px;
		background: url(https://img.js.design/assets/img/636a0f1ccf2c23a7abd66106.png#862f3d6f0825a86e61983e73d7406fc8);
		margin-bottom: 35rpx;
	}

	.hot {
		padding: 24rpx 16rpx;
		border-radius: 16rpx;
		background: linear-gradient(180deg, rgb(255, 232, 229) 0%, rgb(255, 230, 227) 100%);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.hotTit {
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 32rpx;
				margin-right: 4rpx;
			}

			text {
				font-size: 32rpx;
				font-weight: 400;
				line-height: 33rpx;
				color: rgba(238, 33, 45, 1)
			}

			.u-icon {
				margin-top: 5rpx;
			}

		}

		.hostList {
			overflow-y: auto;
			width: 100%;
			height: 700rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 16rpx;
			padding: 32rpx 16rpx;

			.hotItem {
				margin-bottom: 30rpx;

				.hotItemTit {
					width: calc(100% - 150rpx);

					.xh {
						color: rgb(238, 33, 45);
						font-weight: 700;
						font-size: 26rpx;
						margin-right: 15rpx;
					}

					.tit {
						color: #000;
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.hotItemAcc {
					padding: 5rpx 18rpx;
					opacity: 1;
					font-size: 24rpx;
					color: rgb(235, 36, 61);
					border-radius: 50rpx;
					background: rgb(255, 255, 255);
					text-align: center;
					border: 1px solid rgb(235, 36, 61);
					margin-right: 20rpx;

				}
			}

		}
	}
</style>